import { defineComponent, h } from "vue";
import {px_e_rem} from "@uit/common.js"
import "./index.css"
const Lottery = defineComponent({
    data(){
        return{

        }
    },
    setup(){

        const creatLight = () => {
            const lights = []
            const lightNum = 12
            const spanWidth = 550 / 12
            for(let i = 1; i <= lightNum; i++){
                let deg = (360 / lightNum) * i
                lights.push(h('span',{style:{transform:`rotate(${deg}deg)`,width:px_e_rem(spanWidth)}},null))
            }

            return h('div',{class:'Lottery-light'},lights)
        }

        const Turntable = () =>{
            const lines = []
            const lightNum = 8
            for(let i = 1; i <= lightNum; i++){
                let deg = (360 / lightNum) * i
                lines.push(h('span',{style:{transform:`rotate(${deg}deg)`,width:px_e_rem(1)}},null))
            }

            return h('div',{class:'Lottery-Turntable',},
            lines
            )
        }

        const Gifts = () => {
            const gitfs = []
            const lightNum = 8
            for(let i = 1; i <= lightNum; i++){
                let deg = (360 / lightNum) * i
                gitfs.push(h('span',{style:{transform:`rotate(${deg}deg)`}},null))
            }
            return h('div',{class:'Lottery-Gifts'},
            gitfs
            )
        }
    
        const startbtn = () => {
            return h('button',{},'start')
        }

        return ()=> h('div',{class:'Lottery'},
        h('div',{class:'Lottery-inner'},[
            creatLight(),
            h('div',{class:'Lottery-container'},[
                Turntable(),
                Gifts(),
            ]),
            startbtn(),
        ])
        )
    }
})

export default Lottery